<template>
  <div class="pc-box">
    <div class="pc-preview" v-if="this.content ? true : false">
      <div class="title">亲爱的用户您好！</div>
      <div class="name">{{this.name}}</div>
      <div class="time">{{this.time}}</div>
      <div class="content" v-html="this.content"></div>
    </div>
    <div class="pc-preview" v-else>无预览内容展示</div>
  </div>
</template>

<script>
export default {
  name: "pc-preview",
  data() {
    return {};
  },
  props: ["name", "content", "time"],
  methods: {}
};
</script>

<style lang="scss" scoped>
.pc-box {
  background: #f5f7fa;
  .pc-preview {
    padding: 20px;
    font-size: 14px;
    width: 100%;
    .title {
      color: #000;
    }
    .name,
    .time {
      color: rgb(170, 167, 167);
    }
    .content {
      color: #000;
      min-width: 300px;
      max-width: 600px;
      word-wrap: break-word;
      overflow: hidden;
      img{
        width: 100% !important;
      }
    }
    
  }
}
</style>

